import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:xvideos/hj_utils/screen.dart';
import 'package:xvideos/hj_utils/widget_utils.dart';

import '../../../assets_tool/app_colors.dart';

class HomeMoreTabMenu extends StatefulWidget {
  final PageController? pageController;
  final List<String> titleArr;
  final EdgeInsetsGeometry? padding;
  final int? currentIndex;
  final Function(int)? callback;
  final bool showIndicator;
  final Color? selectColor;

  const HomeMoreTabMenu(
    this.titleArr, {
    super.key,
    this.pageController,
    this.padding,
    this.currentIndex,
    this.callback,
    this.showIndicator = false,
    this.selectColor,
  });

  @override
  State<StatefulWidget> createState() {
    return _HomeMoreTabMenuState();
  }
}

class _HomeMoreTabMenuState extends State<HomeMoreTabMenu> {
  int get currentPage {
    if (widget.pageController?.hasClients == true) {
      double offset = (widget.pageController?.offset ?? 0) + 80;
      int value = offset ~/ screen.screenWidth;
      return value;
    }
    return widget.currentIndex ?? 0;
  }

  @override
  void initState() {
    super.initState();
    widget.pageController?.addListener(() {
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.only(left: 6, right: 6),
      alignment: Alignment.centerLeft,
      // color: Color(0xff1b1722),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: List.generate(
            widget.titleArr.length,
            (index) => _buildTabItem(
                  index,
                  widget.titleArr[index],
                  currentPage == index,
                )),
      ),
    );
  }

  Widget _buildTabItem(int index, String title, bool isSelected) {
    return InkWell(
      onTap: () {
        widget.pageController?.jumpToPage(index);
        widget.callback?.call(index);
      },
      child: Container(
        padding: widget.padding ?? const EdgeInsets.symmetric(horizontal: 24),
        child: Column(
          mainAxisSize: MainAxisSize.min, //
          children: [
            Text(
              title,
              style: TextStyle(
                color: isSelected ? (widget.selectColor ?? Colors.white) : Color(0xFF999999),
                fontWeight: isSelected ? FontWeight.w500 : FontWeight.normal,
                fontSize: 14,
              ),
            ),
            if (widget.showIndicator) ...[
              2.w.sizeBoxH,
              if (isSelected)
                Container(
                  width: 15,
                  height: 4,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(2),
                    gradient: LinearGradient(
                      colors: [
                        Color(0x00E1351F),
                        Color(0xFFE1351F)
                      ]
                    ),
                  ),
                )
            ],
            // else
            //   2.sizeBoxH,
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
  }
}
